<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->



<html>
    <script src="js/jquery.min.js"></script>
    <script>
    $(function(){
        
        $.ajaxSetup({
            type:"POST",
            url:"./abc.php",
            dataType:"json",
            success:comment_add
        });
        
                //为这个按钮添加单击事情！！
                $("#btn").click(comment_send);
            });
            function comment_send(){
                var vname=$("#input_name").val();
                var vcomment=$("#input_comment").val();
                
          $.ajax({data:{name:vname,comment:vcomment}});
        
    }
    function comment_add(data)
    {
           html="<tr><td>"+data.name+"</td><td>"+data.comment+"</td></tr>";
           $("tbody").append(html);
    }
    
    </script>
<style>
    *{
        
    }
    .comment{
            border: solid 2px red;
            border-radius: 20px 40px;
             text-shadow: 5px 5px 5px red,15px 15px 5px cyan;
             font-family: cursive;
             font-weight: bold;
             font-size: 40px;
            line-height: 100px;
	    color: deepskyblue;
}
.an{
            border-style:none;
            padding:8px 30px;
            line-height:24px;
            color:#fff;
            font:16px "Microsoft YaHei", Verdana, Geneva, sans-serif;
            cursor:pointer;
            border:1px #ae7d0a solid;
            -webkit-box-shadow:inset 0px 0px 1px #fff;
            -moz-box-shadow:inset 0px 0px 1px #fff;
            box-shadow:inset 0px 0px 1px #fff;/*内发光效果*/
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;/*边框圆角*/
            text-shadow:1px 1px 0px #b67f01;/*字体阴影效果*/
            background-color:#feb100;
            background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#feb100), to(#e8a201));
            background-image: -webkit-linear-gradient(top, #feb100 0%, #e8a201 100%);
            background-image: -moz-linear-gradient(top, #feb100 0%, #e8a201 100%);
            background-image: -ms-linear-gradient(top, #feb100 0%, #e8a201 100%);
            background-image: -o-linear-gradient(top, #feb100 0%, #e8a201 100%);
            background-image: linear-gradient(top, #feb100 0%, #e8a201 100%);/*颜色渐变效果*/
}
</style>
    <head>
        <meta charset="UTF-8">
        <title>评论页面</title>
    </head>
    <body>
        <div class="comment">Ajax无刷新发表评论</div>
        <ul>
            <li>姓名：<input type="text" id="input_name"/></li>
            <li>评论：<input type="text" id="input_comment"/></li>
        </ul>
        <input class="an" type="submit" value="发表评论" id="btn">
        <table border="1">
            <br>
            <br>
            <thead>
            <th class="an">评论者姓名</th>
            <th class="an">评论内容</th>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </body>
</html>
